/**
 * @description  : 行政区域选择组件
 * @descriptionDetail : 行政区域选择组件
 * @copyright    : 浙江烟草
 * @author       : mc
 * @create       : 2022-10-04 18:57:47
 */
<template>
  <view class="page"> 
    <theme-navbar
      :is-white="false"
      :isBack="false"
      backColor="#2b85e4"
      title="选择行政区划"
    >
      <view class="nav-right-icon" @tap="onSure">
        确定
      </view>
    </theme-navbar>
    <view class="content">
      <view class="header-list">
        <u-tabs :list="tabList" :is-scroll="true" :show-bar="false" :current="current" @change="change"></u-tabs>
        <u-divider bg-color="#e8e8e8" height="5" half-width="100%"></u-divider>
      </view>
      <view id="areaListContainer">
        <u-cell-group>
          <view v-for="(item, idx) in areaItems" :key="idx">
            <!-- item.areaCode == '999999' 表示 不详  -->
            <u-cell-item
              :title="item.areaName" 
              v-if="item.areaLevel != '03' && item.areaCode != '999999'"
              @tap="handlerItem(item)"
            >
            </u-cell-item>
            <u-cell-item :arrow="false" :title="item.areaName" v-else @tap="handlerSelect(item)">
              <u-icon
                name="checkbox-mark"
                color="#2979ff"
                size="38"
                v-if="selectIds.includes(item.id)"
                slot="right-icon"
              ></u-icon>
            </u-cell-item>
          </view>
        </u-cell-group>
      </view>
    </view>
  </view>
</template>

<script> 
import commonService from "@/service/common/common.service"
/** 
 * 部门选择
 * 可以限制单选、多选，可选的层级
 */
export default {
  name: "area-select",
  props: {
     // 单选或多选, 默认单选
    isSingle: {
      type: Boolean,
      default: true
    },
    root:{
      type:String,
      default:"",// 根节点 默认浙江省
    },
	choiceAll:{ // 所有层级是否可选
	  type: Boolean,
	  default: false,
	}
  },
  data() {
    return {
      user: this.$storage.get(this.$rp.common.USER).user,
      areaList: [],   // 所有部门数据
      tabList: [],  // 页头滚动内容
      current: 0,
      areaItems: [],  // 点击选中的下级部门
      selectItems: [],  // 选中的区划
      selectIds: [],    // 选中的区划id
    };
  }, 
  created() {
    // 查询区划数据
    if (this.$store.state.areas) {
        this.areaList = this.$store.state.areas.map(d => {
          d.name = d.areaName;
          d.id = d.areaCode;
          d.pId = d.areaLevel == '01' ? "" : (d.areaLevel == '02' ? d.proCode : d.admdivCode);
          return d;
        });
        if(this.root){
          this.tabList = this.areaList.filter(d => d.areaCode == this.root);
        }else{
          this.tabList = [{name:"全国",id:""}];
        }
        this.areaItems = this.areaList.filter(d => d.pId == this.tabList[0].id);
    }
  },
  methods: {
    // 切换选中项
    change(index) {
      this.current = index;
      this.areaItems = this.areaList.filter(d => d.pId == this.tabList[index].id);
      this.tabList = this.tabList.slice(0, index+1);
    },
    // 点击选中项
    handlerItem(areaItem){
      this.tabList.push(areaItem);
      this.current = this.tabList.length - 1;
      this.areaItems = this.areaList.filter(d => d.pId == areaItem.id);
    },
    // 点击根节点
    handlerSelect(areaItem) {
      if (this.isSingle) {  // 单选
        this.selectItems = [];
        this.selectIds = [];
        this.selectItems.push(areaItem);
        this.selectIds.push(areaItem.id);
      } else {  // 多选
        let sItems = this.selectItems.filter(s => s.id == areaItem.id);
        if (sItems.length > 0) {
          this.selectItems = this.selectItems.filter(s => s.id != areaItem.id);
          this.selectIds = this.selectIds.filter(i => i != areaItem.id);
        } else {
          this.selectItems.push(areaItem);
          this.selectIds.push(areaItem.id);
        }
      }
    },
    // 点击确定
    onSure() {
        if(this.selectItems.length > 0){
		  this.$emit("choose", this.selectItems);
		  return;
        }
		if(this.choiceAll && this.tabList && this.tabList.length > 0){
			let tmp = this.tabList[this.tabList.length - 1];
			if(tmp.id != "" && tmp.name != '全国'){
				this.$emit("choose", [tmp]);
				return;
			}
		}
		this.$u.toast("请选择行政区划！");
    }
  },
};
</script>

<style lang="scss" scoped>
	.page{
		padding: 0 !important;
	}
.header-list {
  position: fixed;
  top: 44px;
  left: 0px;
  width: 100%;
  z-index: 999;
}
#areaListContainer {
  margin-top: 65px;
}
.nav-right-icon {
  padding-right: 15px;
  color: #FFF;
}
/deep/ .u-tab-item {
  max-width: 160px;
}
</style>